

<header>
    <div class="nav-logo"  style="justify-content: center;position: relative">
        <img src="@routes.Assets.versioned("images/logo2.png")" />

        <div style="text-align: center;
            ">
            <h2 style="color: #614044;font-size: 40px"> Oil-tea Camellia Database  </h2>
            <h4 style="color:black;font-size: 18px;font-weight: bold">a genome-centered multi-omics database for oil-tea camellia</h4>
        </div>

        <div class="" style="height: 70px;
            display: flex;position: absolute;right: 0;
            align-items: flex-end;
            justify-content: flex-end">

            <form method="get" action="/COADB/all/searchPage" class="form-inline"
            style="">
                <div class="input-group" style="margin-left: 15px">
                    <input type="text" name="input" class="form-control noBorderRightRadius"
                    placeholder="Keyword" style="height: 30px;" size="15"/>
                    <span class="input-group-btn">
                        <button class="btn my-btn  " type="submit"
                        style="height: 30px;display: flex"><i class="fa fa-search"></i></button>
                    </span>
                </div>
            </form>

        </div>
    </div>

    <nav class="navbar navbar-expand-lg">

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item" id="back"><a class="nav-link"  >   </a></li>

                <li class="nav-item active" id="index"><a class="nav-link" href="@routes.HomeController.index">  主页</a></li>
                <li class="nav-item my-dropdown" id="browse">
                    <a class="nav-link" href=""> 浏览 <i class="fa fa-caret-down"></i> </a>

                    <ul>

                        <li class="my-right">
                            <a href="javascript:void(0)">Genome <i class="fa fa-caret-right"></i></a>
                            <ul>
                                <li><a href="@routes.GenomeController.genomePage("Coleifera")"> <i>Camellia chekiangoleosa</i> </a></li>
                                <li><a href="@routes.GenomeController.genomePage("Camellia_lanceoleosa")"> <i>Camellia lanceoleosa </i></a></li>
                                <li><a href="@routes.GenomeController.genomePage("CON")"> <i>Camellia oleifera </i>Abel. var. “Nanyongensis”</a></li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li class="my-right">
                            <a href="javascript:void(0)">Jbrowse <i class="fa fa-caret-right"></i></a>
                            <ul>
                                <li><a href="http://210.22.121.250:20795/?data=my_data/COADB/Coleifera/data" target="_blank"> <i>Camellia chekiangoleosa </i></a></li>
                                <li><a href="http://210.22.121.250:20795/?data=my_data/COADB/Camellia_lanceoleosa/data" target="_blank"> <i>Camellia lanceoleosa </i></a></li>
                                <li><a href="http://210.22.121.250:20795/?data=my_data/COADB/CON/data" target="_blank"> <i>Camellia oleifera </i> Abel. var. “Nanyongensis”</a>
                                </li>
                            </ul>
                        </li>
                        <li class="divider"></li>
                        <li><a href="@routes.SearchController.searchPage">Gene Search</a></li>
                        <li><a href="@routes.SearchController.seqFetchPage">Sequence Fetch</a></li>
                        <li class="divider"></li>
                        <li><a href="@routes.BlastController.blastPage">BLAST</a></li>

                        <li class="divider"></li>
                        <li><a href="@routes.BlockController.syntenicPage">共线性</a></li>

                    </ul>
                </li>

                <li class="nav-item" id="phenotype"><a class="nav-link" href="@routes.PhenotypeController.phenotypePage"> 表型信息  </a></li>
                <li class="nav-item my-dropdown" id="qtl" style="width: 140px">
                    <a class="nav-link" href="javascript:void(0)">  Markers/QTLs <i class="fa fa-caret-down"></i></a>
                    <ul>

                        <li><a href="@routes.HomeController.blankPage("SSR")">SSR</a></li>
                        <li><a href="@routes.HomeController.blankPage("SNP")">SNP</a></li>
                        <li><a href="@routes.QtlController.qtlPage">QTLs</a></li>

                    </ul>
                </li>
                <li class="nav-item" id="Maps"><a class="nav-link" href="@routes.HomeController.blankPage("Maps")"> Maps  </a></li>
                <li class="nav-item" id="cultivars"><a class="nav-link" href="@routes.FruitController.fruitPage"> 品种信息  </a></li>
                <li class="nav-item" id="fpkm"><a class="nav-link" href="@routes.FpkmController.fpkmPage"> 表达量  </a></li>



@*                <li class="nav-item my-dropdown"  id="search">
                    <a class="nav-link" href="javascript:void(0);">  搜索 <i class="fa fa-caret-down"></i></a>
                    <ul>
                        <li><a href="@routes.SearchController.searchPage">Gene Search</a></li>
                        <li><a href="@routes.SearchController.seqFetchPage">Sequence Fetch</a></li>
                    </ul>
                </li>*@
@*                <li class="nav-item" id="blast"><a class="nav-link" href="@routes.BlastController.blastPage">  BLAST</a></li>
                <li class="nav-item" id="synteny"><a class="nav-link" href="@routes.BlockController.syntenicPage">  共线性</a></li>*@

                <li class="nav-item my-dropdown" id="tools">
                    <a class="nav-link" href="@routes.ToolsController.toolPage">  工具 <i class="fa fa-caret-down"></i></a>
                    <ul>

                        <li><a href="@routes.ToolsController.toolsPage("musclePage")">Muscle</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("genewisePage")">Genewise</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("primerPage")">Primer</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("lastzPage")">Lastz</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("goPage")">GO Enrichment</a></li>
                        <li><a href="@routes.ToolsController.toolsPage("keggPage")">KEGG Enrichment</a></li>
                    </ul>
                </li>

                <li class="nav-item" id="Publications"><a class="nav-link" href="@routes.HomeController.blankPage("Publications")"> 论文  </a></li>


                <li class="nav-item" id="download"><a class="nav-link" href="@routes.DownloadController.downloadPage">  下载</a></li>

                <li class="nav-item my-dropdown" id="about">
                    <a class="nav-link" href="javascript:void(0)">  帮助 <i class="fa fa-caret-down"></i></a>
                    <ul>

                        <li><a href="@routes.HomeController.blankPage("About")">关于我们</a></li>
                        <li><a href="@routes.HomeController.blankPage("User manual")">用户手册</a></li>

                    </ul>
                </li>

                <li class="nav-item" style="
                    position: absolute;
                    left: 10px" id="align-justify"><a class="nav-link" >  <i class="fa fa-align-justify"></i> 导航栏</a></li>
                <li class="nav-item" style="width: 50px;
                    position: absolute;right: 10px" id="lang"><a class="nav-link" href="@routes.HomeController.changeLanguage">  EN</a></li>

            </ul>
        </div>
    </nav>
</header>


<script>

        $(function () {
            $(".nav-item").removeClass("active")
            let host = window.location.href
            let ids = host.split('/')
            let num = 2
            if(ids.length >6){
                num = ids.length-4
            }
            let id = ids[ids.length - num]

            let b = ["search", "blast", "synteny"]

            if (b.indexOf(id) !== -1) {
                id = "browse"
            } else if (id === "blank") {
                id = ids[ids.length - 1]
            }

            $("#" + id).addClass("active")

        })

        $("#align-justify").click(function (){
            let dis = $("#index").css("display")
            if(dis === "none"){
                $(".nav-item").css("display","block")
            }else{
                $(".nav-item").css("display","")
            }

        })

    </script>

